<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
	<!-- 文本格式化属性对文本相关操作（四种方式、10个属性）
	     1.控制字体：font-family、font-size、font-weight
		 2.控制文本布局：text-aline、line-height、letter-spacing、word-spacing
	     3.文本修饰效果：text-decoration、text-shadow
		 4.处理文本效果：white-space
	 
	 -->
	 <style>
		 /* css3语法：选择器{
			         属性:属性值;
					 属性:属性值;
			          ......
		                 } 
		           叫法：一个样式
		 */
		 注释: /*  */
		 bod y div#d1{/* 权值102 */
			 color: #00ff7f;
			 /* 知识点1：文本格式化属性控制字体
			    font-family:字体家族，指定字体形式
			 */
			font-family:华文彩云,sans-serif;
			 /*设置多个字体：浏览器会按照顺序寻找可用字体
			   用户体验，用户系统有什么字体，有先指定字体
			   通常与统配选择器使用  *{}
			 */
			 
			/*
			知识点2：文本格式化属性控制字体
			font-size:字体大小属性，与单位共存
			单位  px 像素  使用特点：绝对值PC端
			em 相对单位，理解：倍数
			              使用特点：相对与父元素按照倍数方式、移动
			*/
		   /*
		   知识点3：文本格式化属性控制字体
		   font-weight:字体粗细属性、不存在单位
		               属性值：数值【100 200 300 ... 900】
					             常用数值：400
					           单词【400=normal，bold(加粗)】
		   */
		  font-weight:900;
		   font-size:2em;
		   text-transform: capitalize;
		   text-transform: ;
		   /*补充：1.英文大写；2.首字母大写；3段落开始间距200px*/
		   text-transform: uppercase;
		   text-transform: capitalize;
		   text-indent:200px;
		 }
		 di v#d1{ /*通过加权方式，锁定元素 权值：101*/
			 color:#55ffff;
			 /*知识点4：文本格式化属性控制文本格式
			 text-aligin:文本对齐属性
			 text-align:left|right|center|justify:两端对齐,用于弹性布局
			 */
			text-align: justify;
		 /*知识点5：文本格式化属性
		 行高属性line-height:文本垂直效果
		 使用方式：1.高度属性
		          2.在高度属性上加上行高属性：属性值一致
		 
		 */
		border:1px solid red;
		height:100px;
		line-height:100px;
		/* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
		/*知识点6：letter-spacing:设置字符间的间隙
		 知识点7： word-spacing:设置单词之间的间隙 
				   */
		letter-sp acing:10px;
		letter-spacing:2px;		  
		 }
		 
		 #d1{  /*权值：100*/
			 color: #ff5500;}
		a.c1{/*权值：11*/
		     /*知识点8：text-decoration 修饰超链接样式
			 使用方法：与通配符一起使用，设置全局页面超链接样式
			 属性值：none|underline|line-through
			 
			 */
			
			/*知识点9：text-shadow 修饰文本阴影
			属性值：X轴、Y轴  blur模糊距离 color
			*/
				 text-shadow:5px 5px 5px #ff0;
			 }
			 p{
				 border:1px solid red;
				 /*知识点10：文本换行属性
				 white-space:文本换行属性
				 属性值：nowrap不换行，只显示一行，超出部分隐藏
				 |pre保存空格和回车|normal默认，空格合并，换行隐藏
				 
				 */
				while-space:normal;
				overflow:hidden;
			 }
		 
	 </style>
	</head>
	<body>
		<!-- 需求：创建div同时定别名，添加假文【tab】
		     id选择器，通过加权找到div，添加颜色
		 -->
		<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, quod. Fugiat tempore inventore explicabo assumenda quasi sit modi praesentium illum tempora est consectetur mollitia, voluptates, dignissimos deserunt quia nesciunt officiis.
			<h4>文本修饰效果</h4>
			<!-- 文本修饰相关 属性
			 知识点7：text-decoration属性：设置超链接效果 
			 -->
			<a class="c1 c2" href="https://tsgzy.edu.cn/">实现跳转【方式：6种】</a>
		</div>
		<div style="height:800px">
			<marquee>
				<h4>处理文本效果</h4>
			</marquee>
			<p>Lorem  
			ipsum dolor sit amet consectetur adip
			isicing elit. Assumenda a consequu
			ntur aperiam, placeat voluptatem beatae tenetur quam 
			necessitatibus vitae nisi cupiditate recusandae porro aut ducim
			us vel nihil, incidunt corrupti qui.
			 </p>
		</div>
	</body>
</html>